

import React, { Component } from 'react'
import styles from "./Shopping.module.scss"
import { EyeOutlined } from '@ant-design/icons';
import { DatePicker } from 'antd';
// import 'antd/dist/antd.css';
import moment from 'moment';
import axios  from 'axios';

// const { RangePicker } = DatePicker;

export default class Goodsinformation extends Component {
    constructor(){
        super()
        this.state={
            isbool:true,
            brand:"",//品牌
            goodsName:"",//商品名称
            model: "",//型号
            category: "",//分类
            intoDatetime:"",//入库时间
            quantity:"",//入库数量
            price:"",//价格
            goodsID:""
        }
    }
    goodschange=(even)=>{
        this.setState({
            [even.target.name]:even.target.value
        })
    }
    onChange=(value, dateString)=> {
        console.log('Selected Time: ', value);
        console.log('Formatted Selected Time: ', dateString);
        this.setState({
            intoDatetime: dateString
        })

    }
    enterbtn=()=>{
        let { brand, goodsName, model, category, intoDatetime, quantity, price } = this.state
        const params = new URLSearchParams();
        params.append('brand', brand);
        params.append('goodsName', goodsName);
        params.append('model', model);
        params.append('category', category);
        params.append('intoDatetime', intoDatetime);
        params.append('quantity', quantity);
        params.append('price', price);

        axios.post(`http://class.aulence.com/store-manage/w2003/goods-manage-g4/goods-add.php`, params).then(res => {
            alert(res.data)
            console.log(res);
            this.resetstate()
            // 为指定表格重载数据
            // loadGoodsData('goodsInfo');
        }).catch(err => {
            console.error(err);
        });
    }
    resetbtn=()=>{
        this.resetstate()
    }
    resetstate=()=>{
        this.setState({
            brand: "",//品牌
            goodsName: "",//商品名称
            model: "",//型号
            category: "",//分类
            intoDatetime: "",//入库时间
            quantity: "",//入库数量
            price: ""//价格
        })
    }
    confirmxiugai=()=>{

        let { brand, goodsName, model, category, intoDatetime, quantity, price,goodsID } = this.state;
        const params1 = new URLSearchParams();
        params1.append('goodsID',goodsID);
        params1.append('brand', brand);
        params1.append('goodsName', goodsName);
        params1.append('model', model);
        params1.append('category', category);
        params1.append('intoDatetime', intoDatetime);
        params1.append('quantity', quantity);
        params1.append('price', price);

        // 调用更细数据接口，并传入要更新数据的ID作为参数
        axios.post('http://class.aulence.com/store-manage/w2003/goods-manage-g4/goods-update.php', params1)
            .then(res => {
                alert(res.data);
                // 为指定表格重载数据
                console.log(res);
                if(res.data === "商品数据更新成功！"){
                    setTimeout( ()=>{
                        this.props.history.push({
                            pathname:"/article",
                        })
                    },1000)
                }
            })
            .catch(err => {
                console.error(err);
            });
        this.setState({
            isbool: true
        })
    }
    componentDidMount(){
        let blue = this.props.location.state;
        console.log(this.props.location.state)
        if(blue instanceof Object){
            this.setState({
                brand:blue.brand,
                goodsName:blue.goodsName,
                model: blue.model,
                category: blue.category,
                intoDatetime:blue.intoDatetime,
                quantity:blue.quantity,
                price:blue.price,
                goodsID:blue.goodsID,
                isbool:false
            })
        }
    }


    render() {
        let { brand, goodsName, model, category, intoDatetime, quantity, price}=this.state
        return (
            <div className={styles.mains}>
                <p><EyeOutlined />商品信息录入</p>
                <div className={styles.mains1}>
                    <ul>
                        <li className={styles.ab}>
                            <label>品牌：</label>
                            <input placeholder="请输入商品品牌" name="brand" value={brand} onChange={this.goodschange}/>
                        </li>
                        <li  className={styles.ab}>
                            <label>名称：</label>
                            <input placeholder="请输入商品名称" name="goodsName" value={goodsName} onChange={this.goodschange}/>
                        </li>
                        <li  className={styles.ab}>
                            <label>型号：</label>
                            <input placeholder="请输入商品型号" name="model" value={model} onChange={this.goodschange}/>
                        </li>
                        <li  className={styles.ab}>
                            <label>分类：</label>
                            <select className={styles.datainput} name="category" value={category} onChange={this.goodschange}>
                                <option>--请选择--</option>
                                <option>智能手机</option>
                                <option>Android</option>
                                <option>IOS</option>
                                <option>国产品牌</option>
                            </select>
                        </li>
                        <li  className={styles.ab}>
                            <label>入库时间：</label>
                            {/* <Space direction="vertical" size={12} className={styles.datainput}>   onOk={this.onOk}   name="intoDatetime" value={intoDatetime}*/}
                            <DatePicker className={styles.datainput} showTime onChange={this.onChange} dateString={intoDatetime} value={this.state.intoDatetime === '' ? this.state.intoDatetime : moment(this.state.intoDatetime, "YYYY-MM-DD HH:mm")}/>
                            {/* </Space> */}
                        </li>
                        <li  className={styles.ab}>
                            <label>数量：</label>
                            <input placeholder="请输入商品数量" name="quantity" value={quantity} onChange={this.goodschange}/>
                        </li>
                        <li  className={styles.ab}>
                            <label>单价：</label>
                            <input placeholder="请输入商品销售单价" name="price" value={price} onChange={this.goodschange}/>
                        </li>
                        <li  className={styles.ab}>
                            {this.state.isbool ? <button className={styles.btn_success} onClick={this.enterbtn}>提交</button> : <button className={styles.btn_success} onClick={this.confirmxiugai}>确认修改</button>}
                        </li>
                    </ul>
                </div>
            </div>
        )
    }
}
